<template>
  <div class="collection">
    <div class="header">
      <router-link tag="div" to="/my" class="left">
        <img src="../assets/img/fanhui.png" alt="" />
      </router-link>
      <div class="mid">
        <h3>我的收藏</h3>
      </div>
    </div>

    
        <div v-show="!ye" class="box">
          <img src="../assets/img/huifu.png" alt="" />
          <p>您还没添加任何收藏</p>
        </div>

        
        <div class="main">
 
          <div class="items" v-show="szList">
            <router-link
              tag="div"
              :to="'/details?id=' + item.id"
              class="item"
              v-for="(item, index) in szList"
              :key="index"
            >
              <p>{{ item.title }}</p>
              <span
                >{{ item.content }}
                <em>{{ item.num }}阅读<i>热</i></em>
              </span>
              <div class="del" @click.stop="del(item.id)">
                <img src="../assets/img/del.png" alt="">
              </div>
            </router-link>
          </div>

        </div>
      
  </div>
</template>

<script>
export default {
  props: ["szList"],
  data() {
    return {
      active: 0,
      ye:true,
      Lists:[],
    };
  },
  methods:{
    //删除
    del(id){
      let index = this.Lists.findIndex(item=>item.id==id);
      this.Lists.splice(index,1);
      if(this.Lists.length==0){
        this.ye = false;
      }
    }
  },
  mounted() {
    console.log(this.szList);
    this.Lists = this.szList;
    if(this.Lists.length==0){
      this.ye = false
    }else{
      this.ye = true;
    }
    window.localStorage.setItem('shuju',this.szList);
  },

};
</script>

<style lang="scss" scoped>
.collection {
  .header {
    height: 48px;
    display: flex;
    background: #4eabe8;
    align-items: center;
    .left {
      margin-left: 20px;
      img {
        width: 20px;
        height: 20px;
        background-size: 100%;
      }
    }
    .mid {
      h3 {
        color: #fff;
        line-height: 22px;
        margin-right: 30px;
        font-weight: normal;
      }
      flex: 1;
      text-align: center;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    img {
      width: 50px;
      height: 50px;
      background-size: 100%;
    }
    p {
      color: #bbbbbb;
      font-size: 14px;
      margin-top: 20px;
    }
  }
  .items {
    margin: 0 12px;
    .item {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #efefef;
      padding: 8px 0;
      position: relative;
      p {
        font-size: 17px;
        color: #333;
      }
      span {
        display: -webkit-box;
        overflow: hidden;
        height: 50px;
        margin-top: 4px;
        font-size: 13px;
        color: #bbb;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
        em {
          position: absolute;
          right: 0;
          bottom: 1px;
          font-size: 13px;
          padding-left: 4px;
          background: #fff;
          font-style: normal;
          color: #000;
          i {
            border: 1px solid #d00;
            font-style: normal;
            font-size: 12px;
            margin-left: 4px;
          }
        }
      }
      .del{
        position: absolute;
        top: 8px;
        right: -10px;
        img{
          width: 20px;
          height: 20px;
          background-size: 100%;
        }
      }
    }
  }
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
}
</style>
